<template>
    <!-- 主容器使用flex布局实现左右分栏 -->
    <div class="container">
        <!-- 左侧裁剪操作区域 -->
        <div class="left-panel">
            <!-- 文件选择输入框 -->
            <input
                type="file"
                accept="image/*"
                @change="onFileChange"
                title="选择要裁剪的图片"
            />

            <!-- 裁剪器容器（仅在图片加载后显示） -->
            <div v-if="imageSrc" class="cropper-wrapper">
                <!-- vue-advanced-cropper组件 -->
                <cropper
                    ref="cropperRef"
                         class="cropper"
                         :src="imageSrc"
                         :stencil-props="{ aspectRatio }"
                    >
                </cropper>
            </div>

            <button
                v-if="imageSrc"
                @click="cropImage"
                title="执行裁剪操作"
            >
                裁剪图片
            </button>
        </div>

        <!-- 右侧预览区域 -->
        <div class="right-panel">
            <!-- 裁剪结果预览 -->
            <div v-if="croppedImage" class="preview-wrapper">
                <h3>预览 ({{ aspectRatioLabel }})</h3>  <!-- 显示当前比例标签 -->
                <!-- 裁剪结果图片显示 -->
                <img
                    :src="croppedImage"
                    alt="Cropped Image"
                    class="preview-image"
                    title="裁剪结果预览"
                />
            </div>

            <!-- 未裁剪时的占位提示 -->
            <div v-else class="placeholder">
                裁剪后的图片将在此处显示
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Cropper } from 'vue-advanced-cropper';
import 'vue-advanced-cropper/dist/style.css'; // 引入默认样式

// 组件props定义
const props = defineProps({
    // 裁剪比例参数（父组件传入）
    aspectRatio: {
        type: Number,
        default: 1 // 默认1:1正方形
    }
});

// 响应式数据定义
const imageSrc = ref(null);       // 存储原始图片的DataURL
const croppedImage = ref(null);   // 存储裁剪后图片的DataURL
const cropperRef = ref(null);     // cropper组件实例的引用

// 计算属性：生成可读的比例标签
const aspectRatioLabel = computed(() => {
    // 处理常见比例
    if (props.aspectRatio === 1) return '1:1';
    if (props.aspectRatio === 16/9) return '16:9';
    if (props.aspectRatio === 4/3) return '4:3';
    // 处理自定义比例（保留两位小数）
    return `${props.aspectRatio.toFixed(2)}:1`;
});

// 文件选择处理函数
const onFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();

        // 文件读取完成回调
        reader.onload = (event) => {
            // 将文件转换为DataURL并存储
            imageSrc.value = event.target.result;
        };

        // 开始读取文件
        reader.readAsDataURL(file);
    }
};

// 执行裁剪操作
const cropImage = () => {
    // 从cropper实例获取裁剪结果
    const { canvas } = cropperRef.value.getResult();

    if (canvas) {
        // 将canvas转换为Blob对象
        canvas.toBlob((blob) => {
            const reader = new FileReader();

            // Blob读取完成回调
            reader.onload = (event) => {
                // 存储裁剪结果
                croppedImage.value = event.target.result;  // 存储裁剪后的图片DataURL
            };

            // 读取Blob为DataURL（格式设置为JPEG，质量默认）
            reader.readAsDataURL(blob);
        }, 'image/jpeg'); // 可以修改为其他格式如'image/png'
    }
};
</script>

<style scoped>
/* 主容器布局 */
.container {
    display: flex;          /* 启用flex布局 */
    gap: 20px;              /* 子元素间距 */
    max-width: 1200px;      /* 最大宽度限制 */
    margin: 0 auto;         /* 水平居中 */
}

/* 左侧面板样式 */
.left-panel {
    flex: 1;                /* 弹性填充剩余空间 */
    min-width: 400px;       /* 最小宽度限制 */
    padding: 20px;          /* 内边距 */
    border-right: 1px solid #eee; /* 右侧分隔线 */
}

/* 右侧面板样式 */
.right-panel {
    flex: 1;                /* 弹性填充剩余空间 */
    min-width: 400px;       /* 最小宽度限制 */
    padding: 20px;          /* 内边距 */
}

/* 裁剪器容器 */
.cropper-wrapper {
    height: 400px;          /* 固定高度 */
    margin: 20px 0;         /* 上下外边距 */
    border: 1px solid #ddd; /* 边框 */
    border-radius: 4px;     /* 圆角 */
    overflow: hidden;       /* 隐藏溢出内容 */
}

/* 裁剪器本体样式 */
.cropper {
    height: 100%;           /* 继承父容器高度 */
}

/* 按钮样式 */
button {
    display: block;         /* 块级显示 */
    width: 100%;            /* 满宽度 */
    padding: 12px;          /* 内边距 */
    background: #42b983;    /* 背景色 */
    color: white;           /* 文字颜色 */
    border: none;           /* 无边框 */
    border-radius: 4px;     /* 圆角 */
    cursor: pointer;        /* 手型光标 */
    transition: background 0.3s; /* 背景色过渡动画 */
}

/* 按钮悬停状态 */
button:hover {
    background: #3aa876;    /* 悬停背景色 */
}

/* 预览容器 */
.preview-wrapper {
    height: 400px;          /* 固定高度 */
    display: flex;          /* 启用flex布局 */
    flex-direction: column; /* 垂直排列 */
    gap: 15px;              /* 子元素间距 */
}

/* 预览图片样式 */
.preview-image {
    width: 100%;            /* 满宽度 */
    height: calc(100% - 40px); /* 高度计算（总高 - 标题高度） */
    object-fit: contain;    /* 保持比例完整显示 */
    border: 1px solid #ddd; /* 边框 */
    border-radius: 4px;     /* 圆角 */
    padding: 10px;          /* 内边距 */
}

/* 占位符样式 */
.placeholder {
    height: 400px;          /* 固定高度 */
    display: flex;          /* 启用flex布局 */
    align-items: center;    /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    color: #999;            /* 文字颜色 */
    border: 2px dashed #ddd; /* 虚线边框 */
    border-radius: 4px;     /* 圆角 */
}

/* 文件输入框样式 */
input[type="file"] {
    margin: 10px 0;         /* 上下外边距 */
    padding: 8px;           /* 内边距 */
    border: 1px solid #ddd; /* 边框 */
    border-radius: 4px;     /* 圆角 */
    width: 100%;            /* 满宽度 */
}
</style>